class RoomTypeGroup extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [''],
            values: {},
            roomTypeList: ['']
        };
        this.pageCount = 0;
    }

    componentDidMount() {
        this.verify = {
            groupName: function (value) {
                if (value.length < 2) {
                    return '组名称至少得2个字符!';
                }
            }
        };
    }

    selectCommCallback() {
        this.updateRoomTypeGroupList(1, 10);
    }

    btnSubmit() {
        let params = this.state.values;
        params.commCode = this.refs.buildingSelectList.commCode;
        params.roomTypeId = JSON.stringify(this.refs.sortableList.data);
        postJson("/RoomTypeGroupCtrl/saveRoomTypeGroup.x", params, (data) => {
            this.updateRoomTypeGroupList(1, 10);
            parent.layer.msg('添加成功', {icon: 6});
            this.refs.createRoomTypeGroupModal.close();
        });
    }

    /* custom functions */
    updateRoomTypeGroupList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.groupName = this.refs.searchGroupName.value;
        params.commCode = this.refs.buildingSelectList.commCode;
        postJson("/RoomTypeGroupCtrl/queryRoomTypePageGroup.x", params, (data) => {
            this.pageCount = data.data.size;
            this.setState({
                list: data.data.list
            });
        });
    }

    search() {
        this.updateRoomTypeGroupList(1, 10);
    }

    modify(roomType) {
        this.setState({values: Object.create(roomType)});
        if (roomType.roomTypeId)
            this.refs.sortableList.data = JSON.parse(roomType.roomTypeId);
        this.refs.createRoomTypeGroupModal.show();
    }

    createRoomTypeGroup() {
        postJson("/RoomTypeCtrl/queryRoomTypes.x", {
            commCode: this.refs.buildingSelectList.commCode
        }, (data) => {
            this.setState({
                roomTypeList: data.data
            }, () => {
                this.refs.createRoomTypeGroupModal.show();
            });
        });
    }

    delete(id) {
        layui.layer.confirm('确定要删除该户型组么?', (index) => {
            let params = {};
            params.id = '' + id;
            postJson("/RoomTypeGroupCtrl/deleteRoomTypeGroup.x", $.param(params), () => {
                this.updateRoomTypeGroupList(1, 10);
                layui.layer.msg("戶型组删除成功!");
            });
            layui.layer.close(index);
        });

    }

    construct(commCode) {
        document.location.href = '/AreaCtrl/genArea.x?commCode=' + commCode;
    }

    valueChange(name, value) {
        this.state.values[name] = value;
        this.setState({values: this.state.values});
    }

    endCallback() {
        this.setState({
            values: emptyObj(this.state.values),
            data: []
        });
        this.refs.sortableList.clean();
    }

    selectChange(data) {
        let list = this.state.roomTypeList;
        for (let i in list) {
            if (list[i].id.toString() === data) {
                this.refs.sortableList.addItem(list[i]);
                break;
            }
        }
    }

    roomTypeGroupView(roomTypeGroup) {
        if (roomTypeGroup.roomTypeId) {
            let list = JSON.parse(roomTypeGroup.roomTypeId);
            return list.map((roomType) => {
                return '【' + roomType.newIndex + '﹑' + roomType.title + '】'
            })
        }
    }

    render() {
        return (
            <Form type="pane">
                <Item>
                    <LayuiCommSelect
                        formLabelName="小区选择"
                        mask={['building', 'unit', 'floor', 'room']}
                        ref="buildingSelectList"
                        onChangeComm={(comm) => this.selectCommCallback(comm)}/>
                    <Label width="lg">组名称</Label>
                    <Input name="searchGroupName" ref="searchGroupName" btnType="normal"/>
                    <Button btnType="normal" onClick={() => this.search()}>查询</Button>
                </Item>
                <Table ref="table" count={this.pageCount}
                       pageOnClick={(page, pageSize) => this.updateRoomTypeGroupList(page, pageSize)}>
                    <thead>
                    <tr>
                        <th width="200">户型组名称</th>
                        <th width="150">创建时间</th>
                        <th>户型组</th>
                        <th>描述</th>
                        <th width="100">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {

                        this.state.list.map((roomTypeGroup) => {
                            return <tr>
                                <td>{roomTypeGroup.groupName}</td>
                                <td>{roomTypeGroup.creationTime}</td>
                                <td>{this.roomTypeGroupView(roomTypeGroup)}</td>
                                <td>{roomTypeGroup.description}</td>
                                <td>
                                    <Button btnType="normal" size="xs"
                                            onClick={() => this.modify(roomTypeGroup)}>修改</Button>
                                    <Button btnType="danger" size="xs"
                                            onClick={() => this.delete(roomTypeGroup.id)}>删除</Button>
                                </td>
                            </tr>
                        })
                    }
                    </tbody>
                </Table>
                <Modal title="编辑户型组"
                       ref="createRoomTypeGroupModal"
                       endCallback={() => this.endCallback()}>
                    <Form type="pane"
                          size="sm"
                          verify={() => {
                              return this.verify;
                          }}>
                        <Item>
                            <Label>户型组名称</Label>
                            <Input
                                type="text"
                                name="groupName"
                                ref="groupName"
                                lay-verify="groupName"
                                value={this.state.values.groupName}
                                onChange={(value) => {
                                    this.valueChange('groupName', value)
                                }}
                                placeholder="请输入户型名称"/>
                        </Item>
                        <Item>
                            <Label>描述</Label>
                            <Input
                                type="text"
                                name="description"
                                ref="description"
                                value={this.state.values.description}
                                onChange={(value) => {
                                    this.valueChange('description', value)
                                }}
                                placeholder="请输入描述"/>
                        </Item>
                        <i className="layui-icon layui-icon-face-smile"
                           style={{fontSize: '30px', color: '#1E9FFF'}}/>
                        <Item>
                            <Label>添加户型</Label>
                            <Select name="payCustomerId" ref="payCustomerId"
                                    onChange={(data) => this.selectChange(data)}>
                                <option value="">选择添加户型</option>
                                {
                                    this.state.roomTypeList.map((roomType) => {
                                        return <option value={roomType.id}>{roomType.roomTypeName}</option>
                                    })
                                }
                            </Select>
                        </Item>
                        <Blockquote style={{fontSize: '15px'}} size="xs">户型顺序与房号顺序必须一一对应</Blockquote>
                        <Item>
                            <SortableList ref="sortableList"
                                          ulStyle={{
                                              border: "solid 1px #e6e6e6",
                                              padding: '0 10px 0 10px',
                                              overflow: 'auto',
                                              width: '290px',
                                              height: '295px',
                                              listStyle: 'none'
                                          }}/>
                        </Item>
                        <Item>
                            <Button btnType="normal"
                                    className="layui-btn layui-btn-normal layui-btn-sm layui-form-btn"
                                    lay-submit="true"
                                    onClick={() => this.btnSubmit()}>确定保存</Button>
                        </Item>
                    </Form>
                </Modal>
            </Form>
        )
    }
}
